<template>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">出入库管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>入库管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 查询部分 -->
    <div style="margin: 30px 3px;padding: 30px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="入库单号">
                <el-input v-model="formInline.Stockcode" placeholder="请输入入库单号" clearable />
            </el-form-item>

            <el-form-item label="入库类型">
                <el-input v-model="formInline.Stocktype" placeholder="请输入入库类型" clearable />
            </el-form-item>

            <el-form-item label="状态">
                <el-input v-model="formInline.Stockstate" placeholder="请输入状态" clearable />
            </el-form-item>

            <el-form-item label="仓库名称">
                <el-input v-model="formInline.Warehouseid" placeholder="请输入仓库名称" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="">查询</el-button>
                <el-button type="danger" @click="">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 新增按钮 -->
    <el-button type="success" style="margin-left: 16px" @click="dialogVisible = true">
        新增+
    </el-button>

    <!-- 显示列表 -->
     <div style="margin: 30px 3px;">
        <el-table
                fixed 
                :data="tableData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
                :default-expand-all="false"
                >
            <el-table-column fixed  type="index" label="序号" width="80" />
            <el-table-column fixed  prop="stockcode" label="入库单号" width="120" />
            <el-table-column fixed  prop="stocktype" label="入库类型" width="120" />
            <el-table-column fixed  prop="stockstate" label="状态" width="120" />
            <el-table-column fixed  prop="stocktime" label="入库日期" width="120" >
                <template #default="scope">
                    <!-- {{ moment(scope.row.stocktime).format('YYYY-MM-DD') }} -->
                </template>
            </el-table-column>

            <el-table-column prop="warehouseName" label="仓库名称" width="120" />
            <el-table-column prop="associated" label="关联单号" width="120" />
            <el-table-column prop="goodsName" label="入库货品" width="120" />
            <el-table-column prop="agent" label="经办人" width="120" />
            <el-table-column prop="stocknumber" label="入库数量" width="120" />
            <el-table-column prop="stockmoney" label="入库金额" width="120" />
            <el-table-column prop="creator" label="制单人" width="120" />
             <el-table-column prop="creationTime" label="创建日期" width="120" >
                <!-- <template #default="scope">
                    {{ moment(scope.row.creationTime).format('YYYY-MM-DD') }}
                </template> -->
            </el-table-column>
             <el-table-column prop="lastModifierId" label="审核人" width="120" />
              <el-table-column prop="lastModificationTime" label="审核日期" width="120" >
                <template #default="scope">
                    <!-- {{ moment(scope.row.lastModificationTime).format('YYYY-MM-DD') }} -->
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" min-width="120">
            <template #default>
                <el-button link type="primary" size="small" @click="" style="color: red;">
                删除
                </el-button>
                <el-button link type="primary" size="small">修改</el-button>
            </template>
            </el-table-column>
        </el-table>
     </div>

    <!-- 分页组件 -->
    <div style="float: right;">
          <el-pagination
      v-model:current-page="PageInfo.PageIndex"
      v-model:page-size="PageInfo.PageSize"
      :page-sizes="[5, 10, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="PageInfo.TotalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>

    <!-- 添加对话框 -->
    <el-dialog
        v-model="dialogVisible"
        title="新增入库"
        width="80%"
        >
        <!-- 基本信息部分 -->
        <div class="info-section">
            <div class="section-title">基础信息</div>
            <div class="form-container">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="form-item">
                            <span class="required-label">入库单号</span>
                            <el-input placeholder="自动生成系统编号"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="form-item">
                            <span class="required-label">入库类型</span>
                            <el-select placeholder="进货入库" style="width: 100%">
                                <el-option label="进货入库" value="进货入库"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="form-item">
                            <span class="required-label">仓库名称</span>
                            <el-select placeholder="请选择" style="width: 100%">
                                <el-option label="仓库1" value="仓库1"></el-option>
                            </el-select>
                            <el-button class="settings-btn" type="text">设置</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="form-item">
                            <span class="required-label">入库日期</span>
                            <el-date-picker type="date" placeholder="请选择" style="width: 100%"></el-date-picker>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="form-item">
                            <span>关联单号</span>
                            <el-input placeholder="请输入"></el-input>
                            <el-button class="lookup-btn" type="text">...</el-button>
                            <el-checkbox>关联采购单号</el-checkbox>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="form-item">
                            <span>供应商</span>
                            <el-input placeholder="请输入"></el-input>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="form-item">
                            <span>联系人</span>
                            <el-input placeholder="请输入"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="form-item">
                            <span>联系方式</span>
                            <el-input placeholder="请输入"></el-input>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="form-item">
                            <span>经办人</span>
                            <el-input placeholder="请选择"></el-input>
                            <el-button class="lookup-btn" type="text">...</el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="form-item">
                            <span>备注</span>
                            <el-input type="textarea" rows="4" placeholder="请输入"></el-input>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 入库明细部分 -->
        <div class="detail-section">
            <div class="section-title">入库明细</div>
            <div class="table-actions">
                <el-button type="primary" size="small">添加</el-button>
                <el-button size="small">移除</el-button>
            </div>

            <el-table border style="width: 100%">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="序号" width="60" type="index"></el-table-column>
                <el-table-column label="货品名称" width="100"></el-table-column>
                <el-table-column label="货品编号" width="120"></el-table-column>
                <el-table-column label="货品类型" width="100"></el-table-column>
                <el-table-column label="规格型号" width="100"></el-table-column>
                <el-table-column label="单位" width="80"></el-table-column>
                <el-table-column label="当前库存" width="100"></el-table-column>
                <el-table-column label="进货数量" width="100"></el-table-column>
                <el-table-column label="已入库数量" width="100"></el-table-column>
                <el-table-column label="未入库数量" width="100" class-name="important-column"></el-table-column>
                <el-table-column label="入库数量" width="100"></el-table-column>
                <el-table-column label="本次入库数量" width="130"></el-table-column>
                <el-table-column label="操作" width="80"></el-table-column>
            </el-table>

            <div class="table-summary">
                <span>合计：</span>
                <span>未入库数量：0</span>
                <span>已入库数量：0</span>
                <span>入库件数：0</span>
                <span>入库数量：0</span>
                <span>入库金额：0.00</span>
            </div>
        </div>

        <!-- 上传附件部分 -->
        <div class="attachment-section">
            <div class="section-title">上传附件</div>
            <el-upload
                action="#"
                list-type="text"
                :auto-upload="false"
            >
                <el-button type="primary">上传</el-button>
            </el-upload>
            <div class="file-list">
                <div class="file-item">
                    <span>文件标签.txt</span>
                    <el-button type="text" class="delete-btn"><el-icon><Delete /></el-icon></el-button>
                </div>
                <div class="file-item">
                    <span>文件标签.doc</span>
                    <el-button type="text" class="delete-btn"><el-icon><Delete /></el-icon></el-button>
                </div>
                <div class="file-item">
                    <span>文件标签.pdf</span>
                    <el-button type="text" class="delete-btn"><el-icon><Delete /></el-icon></el-button>
                </div>
            </div>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary">保存</el-button>
                <el-button>取消</el-button>
            </span>
        </template>
    </el-dialog>


</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import axios from 'axios';
import { ElMessage,ElMessageBox } from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
//import moment from 'moment'


const router = useRouter()

//查询参数
const formInline =ref({
    Stockcode:"",
    Stocktype:"",
    Stockstate:"",
    Warehouseid:""
})
//显示列表参数
const tableData =ref([{
      "id": "",
      "creationTime": "",
      "creatorId": "",
      "lastModificationTime": "",
      "lastModifierId": "",
      "stockcode": "",
      "stocktype": "",
      "associated": "",
      "warehouseid": "",
      "warehouseName": "",
      "stocktime": "",
      "agent": "",
      "phone": "",
      "stockdesc": "",
      "stockstate": "",
      "statedesc": "",
      "creator": "",
      "goodsId": "",
      "goodsName": "",
      "goodscode": "",
      "goodstype": "",
      "version": "",
      "unit": "",
      "newnumber": 0,
      "allocationnumber": 0,
      "stocknumber": 0,
      "nostocknumber": 0,
      "stockmoney": 0,
      "uploadattachment": "00",
}])

//分页参数
const PageInfo =ref({
    PageIndex:1,
    PageSize:10,
    TotalCount:0,
    TotalPage:0
})

//对话框参数
const dialogVisible = ref(false)

//页面加载时
onMounted(()=>{
    //显示
    getStockManagement();
});
//获取入库列表
const getStockManagement = () => {
    // 移除debugger，它可能在某些环境中造成问题
    axios.get('http://localhost:8080/api/app/stock-management', {
        params:{
            Stockcode: formInline.value.Stockcode,
            Stocktype: formInline.value.Stocktype,
            Stockstate: formInline.value.Stockstate,
            Warehouseid: formInline.value.Warehouseid,
            PageIndex: PageInfo.value.PageIndex,
            PageSize: PageInfo.value.PageSize
        }
    }).then(res => { 
        // 打印响应数据，检查结构
        console.log("API响应:", res.data);
        
        // 确保items存在且是数组
        if (res.data && Array.isArray(res.data.items)) {
            tableData.value = res.data.items;
        } else {
            console.error("API响应中items不是数组:", res.data);
            tableData.value = []; // 设置为空数组避免渲染错误
        }
        
        // 同样添加防御性检查
        PageInfo.value.TotalCount = res.data?.totalCount || 0;
        PageInfo.value.TotalPage = Math.ceil(PageInfo.value.TotalCount * 1.0 / PageInfo.value.PageSize);
    }).catch(error => {
        console.error("API请求失败:", error);
        tableData.value = []; // 出错时设置为空数组
    });
}

//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}


</script>

<style scoped>
.section-title {
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.info-section, .detail-section, .attachment-section {
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.form-container {
    padding: 20px;
}

.form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.form-item span {
    width: 80px;
    text-align: right;
    padding-right: 10px;
}

.form-item .el-input, .form-item .el-select, .form-item .el-date-picker {
    flex: 1;
}

.required-label::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}

.settings-btn, .lookup-btn {
    position: absolute;
    right: 0;
    color: #409eff;
}

.table-actions {
    margin-bottom: 15px;
    padding: 0 15px;
    display: flex;
    align-items: center;
}

.warning-msg, .error-msg {
    color: #e6a23c;
    margin-left: 15px;
    display: flex;
    align-items: center;
}

.error-msg {
    color: #f56c6c;
}

.warning-msg .el-icon, .error-msg .el-icon {
    margin-right: 5px;
}

.table-summary {
    margin-top: 15px;
    text-align: right;
    padding: 10px;
    font-weight: bold;
}

.table-summary span {
    margin-left: 15px;
}

.important-column {
    color: #f56c6c;
    font-weight: bold;
}

.file-list {
    padding: 10px 20px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.delete-btn {
    color: #67c23a;
}

.dialog-footer {
    display: flex;
    justify-content: center;
}

.dialog-footer .el-button {
    min-width: 100px;
    margin: 0 10px;
}
</style>